<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 移动网页必须设置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>分类</title>
    <script src="./font_s/iconfont.js"> </script>
    <link rel="stylesheet" href="./css/shuzhuo.css">
</head>

<body>

    <div class="header">
        <div>
            <h2>定时器</h2>
            <div class="box">学累了就歇</div>
        </div>
        <div id="dom">
            <h2>不喜欢就删了吧</h2>
            <button>显示介绍</button>
            <button>双击删除</button>
            <ul class="list">
                <li> <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test1"></use>
                    </svg>

                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu-copy"></use>
                    </svg>

                </li>
                <li><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiatongtouxiang"></use>
                    </svg></li>
                <li><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan1"></use>
                    </svg></li>
                <li><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu2"></use>
                    </svg></li>
                <li><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tushu3"></use>
                    </svg></li>
            </ul>

        </div>
    </div>
    <div class="content">
        <div class="tab">
            <h2>收藏</h2>
            <div class="tt">
                <span class="cur">文学</span>
                <span>小说</span>
                <span>青春文学</span>
                <span>动漫/幽默</span>
            </div>
            <div class="tc show"><img src="./images/shuji.1.jpg" alt="">纪实文学</div>
            <div class="tc"><img src="./images/shuji.2.jpg" alt="">中国当代小说</div>
            <div class="tc"><img src="./images/shuji.4.jpg" alt="">爱情 /情感</div>
            <div class="tc"><img src="./images/shuji.9.jpg" alt=""> 大陆动漫</div>
        </div>

        <div class="tab">
            <h2>在读</h2>
            <div class="tt">
                <span class="cur">骆驼祥子</span>
                <span>活着</span>
            </div>
            <div class="tc show"><img src="./images/shuji15.jpg" alt="">生活有很多不幸</div>
            <div class="tc"><img src="./images/shuji16.jpg" alt="">看哭了都</div>
        </div>


    </div>
    <div id="footer" class="clearfix">
        <ul class="bnav">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu1"></use>
                </svg>
                <p><a href="index.html">领读</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenlei"></use>
                </svg>
                <p><a href="fenlei.html">分类</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test1"></use>
                </svg>
                <p><a href="#">书桌</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                </svg>
                <p><a href="wo.html">我</a></p>
            </li>
        </ul>
    </div>
    <script src="./js/tab.js"></script>
    <script>
        //DOM查询，5种方法
        var dom = document.getElementById("dom"); /* 结果唯一 */
        var btn = dom.getElementsByTagName("button"); /* 类数组 */
        var h2 = dom.querySelector("h2"); /* 找到第一个h2，结果唯一，支持CSS3选择器 */
        var ul = dom.getElementsByClassName("list")[0]; /* 类数组 */
        var li = ul.querySelectorAll("li"); /* 类数组 */

        btn[0].onclick = function () {
            var arr = ul.querySelectorAll("li");

            for (var i = 0; i < arr.length; i++) {
                arr[i].onmouseover = function () {
                    //内部不能用i，用this
                    this.innerText = "大帅逼";
                    this.onmouseout = function () {
                        this.innerText = " ";
                    }

                }
            }
        }

        btn[1].onclick = function () {
            var arr = ul.querySelectorAll("li");
            for (var i = 0; arr.length; i++) {
                arr[i].ondblclick = function () {
                    //内部不能用i，用this
                    this.parentNode.removeChild(this);
                    //必须通过父元素删除元素
                }
            }
        }


        var h2 = document.getElementsByTagName("h2")[0];
        var box = document.querySelectorAll(".box");
        var n = 0;
        var timer; /*用来 关闭定时器 */

        timer = setInterval(function () {
            if (n > 100) clearInterval(timer); /* 关闭定时器 */
            h2.innerText = ++n;
        }, 98);
        setTimeout(hide, 3000);

        function hide() {
            //修改css:className、classList
            // box[1].className="box hide";
            box[0].classList.add("hide");
        }

        setTimeout(function () {
            box[0].classList.add("opacity"); /* 动画消失 */
        }, 3000)
    </script>
</body>

</html>